<template>

    <el-card class="box-card">
        <template #header>
            <div>
                接收单位
                <el-checkbox v-model="checkedALL" @change="checkallChanged">全选</el-checkbox>
            </div>
        </template>
        <el-main style="overflow-y: hidden;padding:0px;">
            <el-space :wrap="true" :size="size" class="elspace">

                <el-card v-for="item,index in checkList" :key="index" shadow="never" class="elcard" :style="'height:'+cardHeight+'px !important;'">
                    <template #header>
                        <div>
                            {{item.label}}
                            <el-checkbox v-model="item.checked" @change="checkChanged(item.id)">全选</el-checkbox>
                        </div>
                    </template>

                    <div v-for="rate,rateindex in item.children" :key="rateindex">
                        <el-checkbox v-model="rate.checked" :label="rate.label" @change="rateChanged(item)" />
                    </div>
                </el-card>

            </el-space>
        </el-main>
        <el-footer v-if="ifshowfoot" class="elfooter">
            <el-button type="primary" size="small" @click="confirm">确认</el-button>
        </el-footer>
    </el-card>

</template>
  <script setup>  
import { reactive, getCurrentInstance, defineEmits, ref, onMounted, nextTick } from 'vue'

const { proxy } = getCurrentInstance()
const emit = defineEmits(['sendStations', 'confirm'])
let checkedALL = ref(false)
let size = ref(10)
let ifshowfoot = ref(false)
let checkList = reactive([

    // {
    //     label: '海东市',
    //     checked: false,
    //     children: [
    //         {
    //             label: 996,
    //             checked: false
    //         },
    //         {
    //             label: 997,
    //             checked: false
    //         },
    //         {
    //             label: 998,
    //             checked: false
    //         },
    //         {
    //             label: 999,
    //             checked: false
    //         }
    //     ]
    // },

])
let cardHeight = ref(300)
//接收台站
let stationInput = ''
let stationIds = ''
let inputData = {}

//确认事件
let confirm = () => {
    emit('confirm')
}

//台站选择事件
let rateChanged = (item) => {
    if (item.children != undefined) {
        let allchecked = true
        item.children.forEach(rate => {
            if (!rate.checked) {
                allchecked = false
            }
        });
        item.checked = allchecked
        if (!allchecked)
            checkedALL.value = false
    }
    let checkedstring = ''
    let checkedvalue = ''
    checkList.forEach(element => {
        element.children.forEach(rate => {
            if (rate.checked) {
                checkedstring += ',' + element.label + '-' + rate.label
                checkedvalue += ',' + rate.id
            }
        });
    });
    stationInput = checkedstring.substring(1)

    emit('sendStations', stationInput, checkList, checkedvalue.substring(1))
}
//地市全选
let checkChanged = (id) => {
    let cityallchecked = true
    checkList.forEach(element => {
        if (element.id == id) {
            cityallchecked = element.checked
            element.children.forEach(rate => {
                rate.checked = element.checked
            });
        }
    });
    if (!cityallchecked)
        checkedALL.value = false
    rateChanged(true)
}
//全选
let checkallChanged = (value) => {
    checkList.forEach(element => {
        element.checked = value
        element.children.forEach(rate => {
            rate.checked = value
        });
    });
    rateChanged(true)
}

//台站赋值
let setStationinput = (inputData) => {
    nextTick(() => {

        if (inputData.stationinput != undefined)
            stationInput = inputData.stationinput
        else
            stationInput = ''


        if (inputData.value != undefined)
            if (inputData.value.length > 0) {
                checkList.length = 0
                checkList.push(...inputData.value)

            }
        if (inputData.stationIds != undefined) {
            stationIds = inputData.stationIds
            let ids = ',' + stationIds

            checkList.forEach(element => {
                let ct = 0
                element.children.forEach(rate => {
                    if (ids.indexOf(',' + rate.id) >= 0) {
                        rate.checked = true
                        ct++
                    }
                    else
                        rate.checked = false
                });
                if (ct == element.children.length && ct != 0)
                    element.checked = true
                else
                    element.checked = false
            });

        }

        rateChanged(true)
    })

}
let setStationvalue = (value, stationIds, stationinput, buttonshow) => {

    inputData.value = value
    inputData.stationIds = stationIds
    inputData.stationinput = stationinput
    ifshowfoot.value = buttonshow
    setStationinput(inputData)
}
//重置选项
let resetStation = () => {
    inputData = {}

    checkList.forEach(element => {
        element.checked = false
        element.children.forEach(rate => {
            rate.checked = false
        });
    });
}


onMounted(async () => {
    let dept = await proxy.$API.system.dept.list.get()
    let maxrowct = 0
    dept.data.forEach(element => {
        if (element.children.length > maxrowct)
            maxrowct = element.children.length
    })
    cardHeight.value = maxrowct * 32 + 90


    checkList.length = 0
    checkList.push(...dept.data)


    setStationinput(inputData)
})

//暴露的方法函数
defineExpose({ setStationvalue, resetStation })
</script>
<style lang="scss">
.elfooter {
    display: flex;
    justify-content: center;
    // button {
    //     margin-right: 20px;
    // }
}
.box-card {
    width: 100%;
}
.elspace {
    overflow-y: hidden;
    overflow-x: auto;
}
.elcard {
    width: 157px;
    height: 100% !important;
}
</style>